<template>
  <view>
    <u-modal v-model="show" :content="content"></u-modal>
    <view class="list">
      <view
        class="one"
        @click="signTaskDetail(signTask.id)"
        v-for="(signTask, index) in signTasks"
        :key="index"
      >
        <view class="two">
          <view class="name">
            <text>签到类型：</text>
            <text :class="signTask.type === 1 ? 'audit red' : 'audit green'">{{
              signTask.type | typeText
            }}</text>
          </view>
          <view class="date">
            {{ signTask.gmtCreate }}
          </view>
        </view>
        <view class="three">
          <text>开始时间：</text>
          <text>{{ signTask.signBeginTime }}</text>
        </view>
        <view class="three">
          <view class="four">
            <view class="a">
              <text>结束时间：</text>
              <text>{{ signTask.signEndTime }}</text>
            </view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="button" v-if="signTask.type !== 1">
          <u-button
            @click="signExtend(signTask.extend, signTask.type, signTask.id)"
            size="mini"
            shape="circle"
            type="success"
            :ripple="true"
            ripple-bg-color="#a0cfff"
            >{{ signTask.type | btnText }}</u-button
          >
        </view>
        <u-line color="blue" />
      </view>
      <u-loadmore :status="status" />
      <u-popup
        v-model="showQrcode"
        mode="top"
        :closeable="true"
        length="50%"
        @close="showQrcode = false"

      >
        <view class="qrcode">
          <t-qrcode
            ref="qrcode"
            canvas-id="qrcode"
            :value="'feige:sign:' + currentId"
            :size="size"
          />
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import tQrcode from "../../components/u-qrcode/u-qrcode";
export default {
  name: "sign",
  data() {
    return {
      show: false,
      content: "",
      showQrcode: false,
      size: uni.upx2px(500),
      currentId: "",
    };
  },
  components: {
    tQrcode,
  },
  props: {
    signTasks: {
      type: Array,
      default: [],
    },
    status: {
      type: String,
      default: "",
    },
    courseId: {
      type: String,
      required: true,
    },
  },
  methods: {
    signTaskDetail(id) {
      this.$u.route({
        url: "/pages/sign_detail/sign_detail",
        params: {
          id: id,
          courseId: this.courseId,
        },
      });
    },
    signExtend(extend, type, id) {
      if (type === 2) {
        this.showQrcode = true;
        this.currentId = id;
      } else {
        this.content = extend;
        this.show = true;
      }
    },
  },
  filters: {
    typeText(v) {
      let str = "";
      if (v === 1) {
        str = "一键签到";
      } else if (v === 2) {
        str = "扫码签到";
      } else if (v === 3) {
        str = "手势密码";
      }
      return str;
    },
    btnText(v) {
      let str = "";
      if (v === 2) {
        str = "查看二维码";
      } else {
        str = "查看手势";
      }
      return str;
    },
  },
};
</script>

<style lang="scss">
.button {
  text-align: center;
  margin-bottom: 15rpx;
}
.audit {
  height: 30rpx;
  background-color: $u-type-info-light;
  font-weight: bold;
  line-height: 30rpx;
  text-align: center;
}

.five {
  margin-right: 5rpx;
}
.sixe {
  margin-left: 5rpx;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.bold {
  font-weight: bold;
}
.list {
  display: flex;
  flex-direction: column;
  margin-bottom: 120rpx;
  font-size: 30rpx;
  font-weight: bolder;
  .one {
    width: 100%;
    height: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
    .two {
      display: flex;
      justify-content: space-between;
      margin: 20rpx 0 20rpx 30rpx;
      .date {
        margin-right: 20rpx;
      }
    }
    .three {
      margin: 0 0 20rpx 30rpx;
      .four {
        display: flex;
        justify-content: space-between;
        margin: 0 30rpx 0 0;
      }
    }
  }
}
.qrcode {
  margin-top: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
